<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - OA办公系统</title>
    <link href="${pageContext.request.contextPath}/css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/fontawesome.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>

</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
<div class="container mx-auto fade-in">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">员工管理</h1>
        <button id="addEmployeeBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect" onclick="addEmployee()">
            <i class="fas fa-user-plus mr-2"></i>
            <span>添加员工</span>
        </button>
    </div>

    <!-- 员工列表 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">职位</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入职日期</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody id="employeeTableBody" class="bg-white divide-y divide-gray-200">
            <!-- 员工数据行 -->
            </tbody>
        </table>
    </div>

    <!-- 分页组件 -->
    <div class="mt-6">
        <nav id="butt" class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">

        </nav>
    </div>
</div>

<!-- 模态框 -->
<div id="employeeModal" class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl">
        <div class="flex justify-between items-center mb-4">
            <h2 id="modalTitle" class="text-2xl font-bold text-gray-800">添加员工</h2>
            <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="employeeFormContent">
            <input type="hidden" id="employeeId" name="employeeId">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
                <div>
                    <label for="position" class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                    <input type="text" id="position" name="position" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
                <div>
                    <label for="department" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                    <input type="text" id="department" name="department" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
                <div>
                    <label for="hireDate" class="block text-sm font-medium text-gray-700 mb-1">入职日期</label>
                    <input type="date" id="hireDate" name="hireDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
            </div>
            <div class="flex justify-end mt-4">
                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">保存</button>
            </div>
        </form>
    </div>
</div>
<script>
    //增加
    function addEmployee() {
        window.location.href = "${pageContext.request.contextPath}/pages/add.jsp";
    }
    //修改
    function editEmp(id) {
        window.location.href = "${pageContext.request.contextPath}/oa.action?option=edit&id=" + id;
    }

    //删除
    $(document).on('click', '.delete', function() {
        if (confirm('确定要删除该员工吗？')) {
            var id = $(this).data('id');
            $.ajax({
                url: '${pageContext.request.contextPath}/oa.action',
                type: 'POST',
                data: {
                    option: 'delete',
                    id: id
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        alert('删除成功');
                        getEmployeeList(1); // 刷新当前页
                    } else {
                        alert('删除失败: ' + response.msg);
                    }
                },
                error: function(xhr) {
                    alert('请求失败: ' + xhr.statusText);
                }
            });
        }
    });

    $(function (){
        getEmployeeList(1);
    })

    function getEmployeeList(pageNum) {
        console.log("正在加载第", pageNum, "页");
        $.ajax({
            url: "${pageContext.request.contextPath}/oa.action",
            type: "POST",
            data: {
                "option": "list",
                "pageNum": pageNum,
            },
            dataType: "json",
            success: function (data) {
                $("#employeeTableBody").empty();
                for (const i of data.data) {
                    let tr = `<tr>
                            <td class="px-6 py-4 whitespace-nowrap">` + i.name + `</td>
                            <td class="px-6 py-4 whitespace-nowrap">` + i.position + `</td>
                            <td class="px-6 py-4 whitespace-nowrap">` + i.department + `</td>
                            <td class="px-6 py-4 whitespace-nowrap">` + i.hireDate + `</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="btn edit px-2 py-1 bg-blue-500 text-white rounded mr-2" onclick="editEmp(` + i.id + `)">修改</button>
                                <button class="btn delete px-2 py-1 bg-red-500 text-white rounded" data-id="` + i.id + `">删除</button>
                            </td>
                         </tr>`;
                    $("#employeeTableBody").append(tr);
                }
                $("#butt").empty();
                if (data.pageNum >= 1) {
                    $("#butt").append(`
                <button id="prevPageBtn" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" data-page="` + (data.pageNum - 1) + `">
                <span class="sr-only">Previous</span>
                <i class="fas fa-angle-left"></i>
                </button>`);
                }

                // 添加页码显示
                $("#butt").append(`
            <span class="px-4 py-2 bg-white border-t border-b border-gray-300 text-sm font-medium text-gray-700">
                第 ` + data.pageNum + ` 页/共 ` + data.totalPage + ` 页
            </span>`);

                if (data.pageNum <= data.totalPage) {
                    $("#butt").append(`
                <button id="nextPageBtn" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" data-page="` + (data.pageNum + 1) + `">
                <span class="sr-only">Next</span>
                <i class="fas fa-angle-right"></i>
                </button>`);
                }
            }
        });
    }
    // 添加分页按钮点击事件
    $(document).on('click', '#nextPageBtn, #prevPageBtn', function() {
        var nextPage = $(this).data('page');
        getEmployeeList(nextPage);
    });
</script>
</body>
</html>